import React, {Component} from 'react';
import {Link,Route} from 'react-router-dom'
import Detail from "./Detail";
class Message extends Component {
    state = {
        messageArr:[
            {id:"01",title:'消息1'},
            {id:"02",title:'消息2'},
            {id:"03",title:'消息3'}
        ]
    }

    go=()=>{

        this.props.history.go(-2)
    }

    back = ()=>{
        this.props.history.goBack()
    }

    forward = ()=>{

        this.props.history.goForward()
    }

    pushShow= (id,title)=>{
        // push跳转+携带state参数
        // this.props.history.push(`/home/message/detail`,{id,title})
        // push跳转+携带params参数
        // this.props.history.push(`/home/message/detail/${id}/${title}`)
        // push跳转+携带search参数
        this.props.history.push(`/home/message/detail?id=${id}&${title}`)
    }
    replaceShow=(id,title)=>{
        // replace跳转+携带state参数
        // this.props.history.replace(`/home/message/detail`,{id,title})
        // replace跳转+携带params参数
        // this.props.history.replace(`/home/message/detail/${id}/${title}`)
        // replace跳转+携带search参数
        this.props.history.replace(`/home/message/detail?id=${id}&${title}`)
    }
    render() {
        const {messageArr} = this.state
        return (
            <div>
                <ul>
                    {
                        messageArr.map(msgObj=>{
                            return (
                                <li key={msgObj.id}>
                                    {/*向组件传递search参数*/}
                                    <Link to={`/home/message/detail?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
                                    {/*向组件传递params参数*/}
                                    {/*<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>*/}
                                    {/*向路由组件传递state参数*/}
                                    {/* <Link  to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>&nbsp;&nbsp;*/}
                                    <button onClick={()=>this.pushShow(msgObj.id,msgObj.title)}>push查看</button>&nbsp;
                                    <button onClick={()=>this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button>
                                </li>
                            )
                        })
                    }

                </ul>
                <hr/>
                {/*search参数无需声明*/}
                <Route path="/home/message/detail" component={Detail}/>
                {/*params传参要声明参数*/}
                {/*<Route path="/home/message/detail/:id/:title" component={Detail}/>*/}
                {/*state参数无需声明,正常注册路由即可*/}
                {/*<Route path="/home/message/detail/" component={Detail}/>*/}

                <button onClick={this.forward}>前进</button>&nbsp;
                <button onClick={this.back}>后退</button>&nbsp;
                <button onClick={this.go}>go</button>
            </div>

        );
    }
}

export default Message;
